<!-- 科室选择 -->
<template>
	<uni-popup ref="popup" background-color="#fff" @change="onPopup">
		<view class="wrapper u-p-30">
			<!-- 	<view class="u-p-30  head">
				<u-search placeholder="日照香炉生紫烟" @search="onSearch" @custom="onSearch" v-model="keyword"></u-search>
			</view> -->
			<view class="path u-text-left">
				当前位置: <text @click="onAll" class="path-text u-m-l-20">全部</text>
				<text class="path-text" v-for="(item,index) in currentPosition"
					@click="onPath(item,index,currentPosition)">{{item.name | path(index)}}</text>
			</view>
			<view class="u-flex-1 body">
				<radio-group @change="radioGroupChange">
					<view class="u-flex   u-p-t-30  u-p-b-30 u-row-between  u-border-bottom "
						v-for="(item,index) in list">
						<view class="u-flex-4">
							<label :key="item.id" @click="onLabel(item)">
								<view class="u-flex">
									<view class="">
										<radio color="#409EFF" :value="item.id" :checked="item.id == value" />
									</view>
									<view class="">
										{{item.deptName}}
									</view>
								</view>
							</label>
						</view>
							<template v-if="item.isChild">
						<view class="u-flex-1 u-text-right"  @click.self="onIconNext(item)">
								<!-- <u-line class="u-line"  direction="col"></u-line> -->
								<u-icon name="arrow-right"></u-icon>
						</view>
							</template>
					</view>


				</radio-group>
			</view>

			<view class="u-m-t-20 bottom">
				<HButton @click="onSubmit">确定</HButton>
			</view>
		</view>

	</uni-popup>


</template>
<script>
	import PopUp from '@/components/popup/index.vue'
	import HButton from '@/components/button/index.vue'
	import {
		getHospitalAreaList,
		getHospitalAreaDepartmentList,
		getDepartmentData
	} from '@/apis/common.js'
	export default {
		components: {
			PopUp,
			HButton
		},
		filters: {
			path(text, index) {
				return `/${text}`
			}
		},
		props: {
			value: {
				type: [String, Number],
				default: ''
			}
		},
		data() {
			return {
				currentPosition: [],
				checkLabel: {},
				radioValue: '',
				list: [],
				show: false,

			}
		},
		watch: {
			value(nv, ov) {
				if (nv) {
					this.renderValue()
				}
			}
		},
		computed: {

		},

		methods: {
			async renderValue() { 
				if (this.value) { 
					const res  = await getDepartmentData(this.value)
					if(res.code===0){
						this.onLabel(res.body)
						this.$emit('value', this.checkLabel)
					}
				 
				}
			},
			async init() {
				uni.showLoading({
					title:'请求中...',
					mask:true
				})
				let res = await getHospitalAreaList()
				console.log(res,'res');
				if (res.code === 0) {
					this.list = res.body
				}
				uni.hideLoading()
			},

			onLabel(item) {
				this.$set(this.checkLabel, 'name', item.deptName)
				this.$set(this.checkLabel, 'value', item.id)
				this.$set(this.checkLabel, 'other', item)

			},
			onSubmit() {
				this.$emit('value', this.checkLabel)
				this.$refs.popup.close()
			},
			onPopup(ev) {
				
				this.show = ev.show
				if (ev.show) {
					this.radioValue = ''
					this.init()
				} else {
					this.currentList = []
					this.list = []
					this.currentPosition = []
				}
			},
			openPopUp() { 
				this.$refs.popup.open('bottom')
				 
			},
			onAll() {
				this.currentPosition.splice(0, 1)
				this.$u.debounce(this.init, 500)
			},
			radioGroupChange(ev) {
				this.radioValue = ev.detail.value
			},
			onSearch(val) {
				this.list = this.list.filter((item) => item.userName.indexOf(val) > -1);

				this.$refs.collapse.init()
			},
			async onPath(item, index, arr) { 
				this.getData(item,()=>{
					let count = arr.length - index
					this.currentPosition.splice(index + 1, count)
				})
			 
			},
			async getData(item,fn){
				uni.showLoading({
					title:'请求中...',
					mask:true
				})
				let {
					id,
					deptName
				} = item
				
					
				try{
				let rs = await getHospitalAreaDepartmentList(id)
				if (rs.code === 0) {
					fn({name:deptName,id}) 
					this.list = rs.body.list
				}
				}catch(err){
					
					
				}finally{
					uni.hideLoading()
				}
			},
			async onIconNext(item) {
				this.getData(item,(val)=>{ 
					this.currentPosition.push(val)
				})
			 
			} 
		},



	}
</script>

<style lang="scss" scoped>
	.wrapper {
		width: 100%;
		background-color: #fff;
		height: 70vh;
		display: flex;
		flex-direction: column;
	}

	.path {
		font-weight: 400;
		font-size: 28rpx;
		color: #98A5B3;

		&-text {
			color: #409EFF;

		}
	}

	.head {
		height: 10%;
	}

	.body {
		height: 80%;
		overflow: auto;
	}

	.bottom {
		height: 10%;
	}
</style>
